<template>
  <div class="login-container">
    <div class="top-box">
      <p>欢迎进入南昌理工学院2022考试刷题系统</p>
      <p>共同奋斗，迎接未来!</p>
    </div>
    <div class="login-box">
      <div class="image"></div>
      <div class="login">
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleForm"
          label-width="0px"
          class="login-form"
        >
          <p class="title">你好，请登录~</p>
          <el-form-item prop="name">
            <span class="iconfont icon-yonghu"></span>
            <el-input v-model="form.name" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <span class="iconfont icon-mima"></span>
            <el-input
              v-model="form.password"
              :type="eyes ? 'value' : 'password'"
              placeholder="请输入密码"
            ></el-input>
            <span
              @click="changeEye"
              :class="
                eyes
                  ? 'iconfont eye icon-yanjing'
                  : 'iconfont eye icon-yanjing-biyan'
              "
            ></span>
          </el-form-item>
          <div style="display: flex">
            <el-form-item class="verification" prop="verification">
              <el-input
                v-model="form.verification"
                placeholder="请输入验证码"
              ></el-input>
            </el-form-item>
            <span class="verification-text" @click="getCode">{{ verificationValue }}</span>
          </div>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >登录</el-button
          >
          <p class="link-test" @click="goRegister">现在注册</p>
        </el-form>
      </div>
    </div>
    <div class="footer-box">
      © 2022 - 考试系统登陆界面 || 南理猿创工作室版权所有
    </div>
  </div>
</template>

<script>
// import { login } from "@/api/index";

export default {
  data() {
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("账号不能为空"));
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("密码不能为空"));
      }
    };
    var verification = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("验证码不能为空"));
      }
    };
    return {
      form: {
        name: "",
        password: "",
        verification: "",
      },
      rules: {
        name: [{ validator: validateName, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        verification: [{ validator: verification, trigger: "blur" }],
      },

      verificationValue: "",
      eyes: false,
    };
  },
  mounted() {
    // this.$store.dispatch("user/login", user);
    this.getCode()
  },
  methods: {
    // 切换密码显示
    changeEye() {
      this.eyes = !this.eyes;
    },
    // 随机生成验证码
    getCode() {
      var all =
        "azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789";
      var b = "";
      for (var i = 0; i < 4; i++) {
        var index = Math.floor(Math.random() * 62);
        b += all.charAt(index);
      }
      this.verificationValue = b
    },
    // 表单提交
    submitForm() {
      if (this.form.verification.toLowerCase() === this.verificationValue.toLowerCase()) {
        if (this.form.name != "" && this.form.password != "") {
          let Form = {
            account: this.form.name,
            password: this.form.password
          }
          // console.log(Form);
          this.$store.dispatch("user/login", Form);
        }
      } else {
        this.$message.error("验证码错误");
        this.getCode()
      }
    },
    // 注册账号
    goRegister() {
      this.$router.push('/register')
    }
  },
};
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  width: 100%;
  background: url("@/assets/bg1.webp") no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;

  .top-box {
    position: absolute;
    top: 20px;
    left: 0;
    width: 500px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    p {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 25px;
      font-weight: 600;
      margin: 0;
      color: #e7e7eb;
    }
  }

  .login-box {
    display: flex;
    justify-content: space-between;
    height: 395px;
    width: 600px;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;

    .image {
      width: 260px;
      height: 100%;
      // background-color: pink;
      background: url("@/assets/photo1.png") no-repeat;
      background-size: cover;
    }

    .login {
      height: 100%;
      width: 270px;
      // background-color: pink;
      padding: 0 25px;

      .title {
        font-size: 25px;
        font-weight: 800;
      }

      .link-test {
        color: #89c3eb;
        cursor: pointer;
      }

      ::v-deep .el-form-item {
        border: 1px solid #dcd6d9;
        background: #fff;
        border-radius: 5px;
        color: #454545;

        span {
          margin: 0 10px;
        }

        .eye {
          margin: 0;
        }
      }

      ::v-deep .verification {
        width: 100px;
        // margin: 0;
        .el-input {
          width: 100%;
          input {
            text-align: center;
            padding: 0;
          }
        }
      }

      .verification-text {
        width: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 20px;
        font-size: 25px;
        padding-bottom: 20px;
      }

      ::v-deep .el-input {
        display: inline-block;
        height: 47px;
        width: 75%;

        input {
          background: transparent;
          border: 0px;
          -webkit-appearance: none;
          border-radius: 0px;
          padding: 12px 5px 12px 0px;
          height: 47px;
        }
      }

      ::v-deep .el-button {
        width: 100%;
      }
    }
  }

  .footer-box {
    position: absolute;
    bottom: 50px;
    color: #d3cfd9;
    font-weight: 500;
  }
}
</style>
